<!-- 注册 -->
<template>
  <div v-if="getShow">
    <LoginTitle></LoginTitle>
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="enter-x">
      <el-form-item :label="$t('sys.login.username')" prop="username">
        <el-input v-model="ruleForm.username" />
      </el-form-item>
      <el-form-item :label="$t('sys.login.password')" prop="password">
        <el-input v-model="ruleForm.password" type="password" autocomplete="off" style="width: 300px" />
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="rememberMe">
            <el-checkbox v-model="ruleForm.rememberMe">{{ $t('sys.login.rememberme') }}</el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="forgetPassword" style="justify-content:flex-end">
            <el-link type="primary">{{ $t('sys.login.forgetPassword') }}</el-link>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="forgetPassword" style="justify-content:flex-end">
            <el-button type="primary" @click="setLoginState(LoginStateEnum.REGISTER)" style="width: 100%">{{
              $t('sys.login.register')
            }}</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item>
        <el-button type="primary" @click="backLogin" style="width: 100%">{{ $t('common.back')
        }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
  
<script setup>
import { ref, computed, unref } from 'vue';
import LoginTitle from './loginTitle.vue';
const ruleFormRef = ref(null)
import { useLoginState, LoginStateEnum } from './useLogin.js'

const { getLoginState, setLoginState, backLogin } = useLoginState()

const getShow = computed(() => unref(getLoginState) == LoginStateEnum.REGISTER)
const ruleForm = ref({})

const rules = ref({

})

</script>
  
<style></style>